<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./assets/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
    <style>
        body{
            background: url(./assets/img/nm.jpg);
            background-size:cover ;
        }
        #container{
            width: 800px;
            height:400px;
            margin: auto;
          /*   background-color: darkcyan; */
            top:20%;  
            position: relative;
        }
        #user{
            top: 30%;
            position: absolute;
            left: 40%;
        }
        #password{
            position: absolute;
            top:38%;
            left: 40%;

        }
        #submit{
            width: 177px;
            height: 21px;
            position: absolute;
            top:45%;
            left: 42%;
        }
        .he{
            position: absolute;
            top:10%;
            left: 42%;
        }
        .fo{
            position: absolute;
            top:50%;
            left: 42%;
        }
        #re{
            width: 177px;
            height: 21px;
            position: absolute;
            top:45%;
            left: 42%;
        }
        #sure{
            width: 177px;
            height: 21px;
            position: absolute;
            top:51%;
            left: 42%;
        }
        .retu{
            position: absolute;
            top:55%;
            left: 42%;
        }
    </style>
    <div id="container">
        <div class="he">
            <h2  v-if="see">电商后台管理系统</h2>
            <h2 v-if="seen">忘记密码</h2>
        </div>
        <div class="fa fa-user" id="user">
            <input v-model="username" type="text" placeholder="请输入用户名或邮箱"/>
        </div>
        <div class="fa fa-unlock-alt" id="password">
            <input v-model="password" type="password" placeholder="请输入密码" v-if="see"/>
            <input type="password"placeholder="请输入新密码" v-if="seen"/>
        </div>
        <div id="re"><input type="password" placeholder="确认你的新密码" v-if="seen"></div>
        
        <button id="submit" v-if="see" v-on:click="fun1()" v-on:click="login">登录</button>
        <button id="sure" v-if="seen">确认</button>



        <div v-on:click="funSeen()" class="fo" v-if="see">忘记密码</div>
        <div v-on:click="funSee()" class="retu" v-if="seen">返回登录</div>
    </div>


    <script src="./assets/js/vue.js"></script>
    <script src="./assets/js/axios.min.js"></script>
    <script>
        new Vue({
            el:"#container",
            data:{
                seen:false,
                see:true,
                username: "",
                password: ""
            },
            methods:{
                funSeen(){
                    this.seen=true
                    this.see=false
                },
                funSee(){
                    this.seen=false
                    this.see=true
                },
                fun1(){
                    location.href="app.html"
                },
                login() {
                    // 将账号和密码提交给后端，
                    // 根据后端返回的结果来确定要不要跳转到首页
                    axios.get("/login", {
                        // params : 代表的是需要传递给后端的数据的对象
                        params: {
                            username: this.username,
                            password: this.password
                        }
                    }).then((response) => {
                        // 后端传递给前端的数据在 response.data 中
                        if (response.data == "OK") {
                            // 后端返回 OK，表示登录成功，跳转到首页
                            location.href = "app.html";
                        } else {
                            alert("账号或密码错误！");
                        }
                    });
                }
            }
        })
    </script>

</body>
</html>